<template>
	<el-form ref="ruleFormRef" @validate="validate" :model="formData.model" v-bind="formData.config">
		<el-form-item v-for="(item, index) in formData.items" v-bind="item" :key="item.prop">
			<template #label>
				<el-space :size="4">
					<span>{{item.label || '-'}}</span>
					<el-tooltip v-if="item.tooltip" effect="dark" :content="item.tooltip" placement="top">
						<el-icon>
							<WarningFilled />
						</el-icon>
					</el-tooltip>
				</el-space>
			</template>
			<view class="item">
				<component :is="item.el || item.render" v-bind="item" v-model="formData.model[item.prop]">
					<template v-if="item.options">
						<component v-for="optionItem in item.options" v-bind="optionItem" :label="optionItem.value" :key="optionItem.value"
							:is="optionItem.el">{{optionItem.label}}</component>
					</template>
					<template v-else-if="['el-text', 'text', 'span'].includes(item.el)">
						{{item.value || formData.model[item.prop]}}
					</template>
				</component>
				<component v-if="item.extra" :is="item.extra.el" v-bind="item.extra">{{item.extra.label}}</component>
			</view>
		</el-form-item>
		<el-form-item>
			<!-- 按钮插槽 -->
			<slot name="btns">
				<!-- 默认按钮 -->
				<el-button v-if="formData.submitBtn" v-bind="formData.submitBtn"
					@click="submitForm(formData.submitBtn.click)">
					{{ formData.submitBtn.txt }}
				</el-button>
				<el-button v-if="formData.resetBtn" v-bind="formData.resetBtn"
					@click="resetForm(formData.resetBtn.click)">{{ formData.resetBtn.txt }}</el-button>
			</slot>
		</el-form-item>
	</el-form>

</template>

<script>
	export default {
		name: "li-form",
		props: ['formData'],
		data() {
			return {};
		},
		mounted() {},
		methods: {
			async submitForm(callback) {
				if (!this.$refs.ruleFormRef) return
				await this.$refs.ruleFormRef.validate((valid, fields) => {
					// console.log("submitForm validate isValid:", valid, " fields:", fields);
					if (valid) {
						// console.log('fields: ', fields)
						if (callback) {
							callback(this.formData.model)
						}
					} else {
						console.log('error submit!', fields)
					}
				})
			},
			resetForm(callback) {
				if (!this.$refs.ruleFormRef) return
				this.$refs.ruleFormRef.resetFields()
				if (callback) {
					callback();
				}
			},
			validate(prop, isValid, message) {
				console.log("validate prop:", prop, " isValid:", isValid, " message:", message);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		display: flex;
		flex-direction: row;
		// flex-wrap: wrap;
	}
	
</style>